<template>
  <!--  配置版本管理-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.versionName" clearable placeholder="请输入配置版本名称"></el-input>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd(null)" class="common_btn-small">配置新增</el-button>
      <!-- table -->
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>

        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="versionName" label="版本名称" min-width="140"></el-table-column>
        <el-table-column prop="explanation" label="说明" min-width="150"></el-table-column>
        <el-table-column prop="sampleCycle" label="采样周期" width="100">
          <template slot-scope="scope">
            {{scope.row.sampleCycle /60}} 分钟
          </template>
        </el-table-column>
        <el-table-column prop="storeInterval" label="存储间隔" width="70"></el-table-column>
        <el-table-column prop="reportInterval" label="上报间隔" width="70"></el-table-column>
        <el-table-column prop="storeInterval" label="预估上报间隔" min-width="90">
          <template slot-scope="scope">
            {{((scope.row.sampleCycle * scope.row.storeInterval * scope.row.reportInterval)/60).toFixed(1)}}
            分钟
          </template>
        </el-table-column>
        <el-table-column prop="rebootCycle" label="重启周期" width="95">
          <template slot-scope="scope">
            {{scope.row.rebootCycle /60/60}} 小时
          </template>
        </el-table-column>
        <el-table-column prop="alarmCycle" label="报警周期" width="70"></el-table-column>
        <el-table-column prop="wyjThreshold" label="位移mm" width="90"></el-table-column>

        <el-table-column prop="jgyThreshold" label="雷达mm" width="105"></el-table-column>
        <el-table-column prop="swjThreshold" label="水位cm" width="85"></el-table-column>
        <el-table-column prop="accThreshold" label="倾角°" width="75"></el-table-column>
        <el-table-column label="操作" fixed="right" min-width="190">
          <template slot-scope="scope">
            <el-popconfirm confirmButtonText='好的' cancelButtonText='不用了' icon="" title="确定删除该传感器信息吗？"
                           @confirm="handleDelete(scope.row)">
              <el-button type="text" slot="reference" class="btn_delete" style="margin-right: 10px">删除</el-button>
            </el-popconfirm>
            <button class="btn_edit" @click="handleEdit(scope.row)">编辑</button>
            <button class="btn_add" @click="handleAdd(scope.row)">复制新增</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="form.total">
      </el-pagination>
    </div>
    <el-drawer
      :title="dialogTitle"
      :visible.sync="isShowDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="40%">
      <div class="demo-drawer__content">
        <!-- 具体form表单 -->
        <el-form style="margin-top: 20px" label-position="right" ref="form" :rules="rules" :model="currentRow"
                 label-width="0px">
          <el-form-item label="时间转换工具:" label-width="100px">
            <el-row>
              <el-col :span="14">
                <el-input v-model="convertBefore" placeholder="转换前" clearable>
                  <template slot="append">
                    <el-button size="mini" style="color: #e91e63" @click="convertHandel('m')">分转秒</el-button>
                    <el-button size="mini" style="color: #4caf50" @click="convertHandel('h')">时转秒</el-button>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="10">
                <el-input v-model="convertAfter" placeholder="转换后">
                  <template slot="append">(秒)</template>
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="versionName">
            <el-input v-model="currentRow.versionName" placeholder="请输入版本名称">
              <template slot="prepend">版本名称</template>
            </el-input>
          </el-form-item>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item prop="sampleCycle">
                <el-input v-model="currentRow.sampleCycle" placeholder="自动采集间隔">
                  <template slot="prepend">采样周期</template>
                  <template slot="append">(秒)
                    <el-tooltip placement="top">
                      <div slot="content">采集板定时采样间隔(秒)</div>
                      <i style="color: #0bb20c" class="el-icon-s-opportunity"></i>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item prop="reportInterval">
                <el-input v-model="currentRow.reportInterval" placeholder="N次有效数据上传间隔">
                  <template slot="prepend">上报间隔</template>
                  <template slot="append">(次)
                    <el-tooltip placement="top">
                      <div slot="content">有N次有效数据时上传<br/>这里填N的值<br/>上报时间(秒)=上报间隔*存储间隔*采样间隔</div>
                      <i style="color: #0bb20c" class="el-icon-s-opportunity"></i>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="alarmCycle">
                <el-input v-model="currentRow.alarmCycle" placeholder="触发任意阈值后，采集并上传间隔">
                  <template slot="prepend">报警周期</template>
                  <template slot="append">(秒)
                    <el-tooltip placement="top">
                      <div slot="content">触发任意阈值后<br/>采集并上传的间隔</div>
                      <i style="color: #0bb20c" class="el-icon-s-opportunity"></i>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="alarmCount">
                <el-input v-model="currentRow.alarmCount" placeholder="触发阈值后报价次数">
                  <template slot="prepend">报警次数</template>
                  <template slot="append">(次)
                    <el-tooltip placement="top">
                      <div slot="content">触发任意阈值后<br/>连续报警的次数</div>
                      <i style="color: #0bb20c" class="el-icon-s-opportunity"></i>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="reportInterval">
                <el-input v-model="currentRow.storeInterval" placeholder="N次采样后去重存储">
                  <template slot="prepend">存储间隔</template>
                  <template slot="append">(次)
                    <el-tooltip placement="top">
                      <div slot="content">采样N次后，获得一个有效数据<br/>主要用于加大采集密度，周期内的</div>
                      <i style="color: #0bb20c" class="el-icon-s-opportunity"></i>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="reportInterval">
                <el-input
                  :value="((currentRow.sampleCycle * currentRow.storeInterval * currentRow.reportInterval)/60).toFixed(1)"
                  disabled placeholder="">
                  <template slot="prepend">预估上报间隔</template>
                  <template slot="append">(分钟)
                    <el-tooltip placement="top">
                      <div slot="content">上报间隔(秒)=上报间隔*存储间隔*采样间隔</div>
                      <i style="color: #0bb20c" class="el-icon-s-opportunity"></i>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="rebootCycle">
                <el-input v-model="currentRow.rebootCycle" placeholder="定时重启间隔">
                  <template slot="prepend">重启周期</template>
                  <template slot="append">(秒)</template>
                </el-input>
              </el-form-item>
              <el-form-item prop="rebootCycle">
                <el-select v-model="currentRow.fm" placeholder="解算模式">
                  <el-option
                    v-for="item in EnumFmList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <div class="tips">
            采集仪关联的传感器，大于以下任意阈值均触发报警，以报警周期定时上传数据。
            <el-row :gutter="20" style="margin-top: 10px">
              <el-col :span="12">
                <el-form-item prop="wyjThreshold">
                  <el-input v-model="currentRow.wyjThreshold" placeholder="位移长度">
                    <template slot="prepend">位移计阈值</template>
                    <template slot="append">(mm)</template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="swjThreshold">
                  <el-input v-model="currentRow.swjThreshold" placeholder="水位高度">
                    <template slot="prepend">水位计阈值</template>
                    <template slot="append">(cm)</template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="szyThreshold">
                  <el-input v-model="currentRow.szyThreshold" placeholder="沉降高度">
                    <template slot="prepend">静力水准阈值</template>
                    <template slot="append">(mm)</template>
                  </el-input>
                </el-form-item>

                <el-form-item prop="zdjThreshold">
                  <el-input v-model="currentRow.zdjThreshold" >
                    <template slot="prepend">振动仪报警阈值</template>
<!--                    <template slot="append">(mm)</template>-->
                  </el-input>
                </el-form-item>
                <el-form-item prop="trjThreshold">
                  <el-input v-model="currentRow.trjThreshold" >
                    <template slot="prepend">土壤计报警阈值</template>
                    <!--                    <template slot="append">(mm)</template>-->
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="jgyThreshold">
                  <el-input v-model="currentRow.jgyThreshold" placeholder="位移长度">
                    <template slot="prepend">雷达阈值</template>
                    <template slot="append">(mm)</template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="accThreshold">
                  <el-input v-model="currentRow.accThreshold" placeholder="倾角度数">
                    <template slot="prepend">加速度计阈值</template>
                    <template slot="append">(度)</template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="yljThreshold">
                  <el-input v-model="currentRow.yljThreshold" placeholder="降雨量">
                    <template slot="prepend">降雨量阈值</template>
                    <template slot="append">(mm)</template>
                  </el-input>
                </el-form-item>

                <el-form-item prop="zdjSampleTime">
                  <el-input v-model="currentRow.zdjSampleTime" >
                    <template slot="prepend">振动仪动态采集次数</template>
                    <!--                    <template slot="append">(mm)</template>-->
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>


          <el-form-item prop="explanation">
            <el-input v-model="currentRow.explanation" placeholder="配置文件描述说明" type="textarea" :rows="3"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 操作按钮 -->
      <div class="demo-drawer__footer">
        <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {configAdd, configUpdate, configQueryList, configDelete} from '@/services/model/sensor'
import Format from '@/utils/format'
import Enums from '@/utils/enums'
import constUrl from '@/services/env'

// form表单校验规则
const RULES = {
  versionName: {
    required: true,
    message: '请输入版本名称'
  },
  zdjThreshold: {
    required: true,
    message: '请设置振动仪报警阈值'
  },
  zdjSampleTime: {
    required: true,
    message: '请输入振动仪动态采集次数'
  },
}
export default {
  data() {
    return {
      constUrl,
      convertBefore: '',//转换前
      convertAfter: '',//转换后
      fileList: [],
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      EnumFmList:[],
      rules: RULES, // 表单校验的规则
      tableList: [],

      isShowDialog: false, // 是否显示弹窗
      currentRow: {}, // 新增数据
    }
  },
  mixins: [Enums],
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.currentRow.id ? '编辑配置信息' : '新增配置信息'
    },
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer))
    },
  },
  methods: {
    // 处理删除
    async handleDelete(row) {
      let res = await configDelete({
        id: row.id
      })
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '数据已删除'
        })
        this.queryList()
      }
    },
    convertHandel(model) {
      if (!this.convertBefore) {
        return
      }
      //分钟转秒
      if (model === 'm') {
        this.convertAfter = this.convertBefore * 60
      } else {
        //小时转秒
        this.convertAfter = this.convertBefore * 60 * 60
      }
    },

    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    // 表单提交
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitData()
        }
      })
    },
    async submitData() {
      // 根据ID判断使用新增还是编辑
      let action = this.currentRow.id ? configUpdate : configAdd
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '编辑成功' : '添加成功'
        })
        this.isShowDialog = false
        this.queryList()
      }
    },
    // 新增数据
    handleAdd(row) {
      if (row) {
        //复制新增
        row.id = ''
      }
      this.currentRow = row ? JSON.parse(JSON.stringify(row)) : {}
      this.convertAfter = ''
      this.convertBefore = ''
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    /**
     * row  当前操作行的对象
     */
    handleEdit(row) {
      this.convertAfter = ''
      this.convertBefore = ''
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    async queryList() {
      let res = await configQueryList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)

    },
  },
  mounted() {
    this.queryDictList(['EnumFm'], ['EnumFmList'])
    //	传感器类型下拉框
    this.queryList()
  },

}
</script>

<style lang="less" scoped>
  p {
    display: inline
  }

  a {
    color: #1990FE
  }

  .tips {
    font-size: 12px;
    color: red;
    text-align: center;

    /deep/ .el-input-group__prepend {
      padding: 0 10px;
    }

    /deep/ .el-input-group__append {
      padding: 0 10px;
    }
  }

</style>
